<template>
    <div class="web-header">
        <div class="header">
            <div class="right-area">
                <div class="head-left-content">
                    <span v-if="configObj.name == '创巢'">欢迎访问创巢中小企业众扶平台 / 客服电话：400-969-0660</span>
                    <span v-if="configObj.name != '创巢'">欢迎访问{{configObj.name}}</span><span v-if="configObj.tel">/ 客服电话：{{configObj.tel}}</span>
                </div>
                <div class="head-right-content">
                    <div v-if="name">
                        <div class="r-block logout r-pointer" @click="loginOut()"><span class="fa fa-sign-out">退出登录</span></div>
                        <div class="r-block separator"><span>|</span></div>
                        <div class="r-block nikname">你好，{{name}}</div>
                    </div>
                    <div class="r-block" v-if="!name">
                        <div class="r-inline r-pointer" @click="linkTo('/login')">登录</div>
                        <div class="r-inline regist r-pointer" @click="linkTo('/register')">注册</div>
                    </div>
                    <div class="r-block separator"><span>|</span></div>
                    <div @click="handleLink" class="r-block r-pointer">我的{{configObj.name}}</div>
                    <!--
                    <el-dropdown  v-if="name" 
                            @visible-change="transform_arrow">
                        <span class="el-dropdown-link">
                            <div v-if="name" class="login name">{{name}} 
                                <div class="arrow" :class="{'arrow-transform': arrow_transform}"></div>
                            </div>
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item><span style="display: block;" @click="linkTo('/changePassword')">密码修改</span></el-dropdown-item>
                            <el-dropdown-item><span style="display: block;" @click="loginOut()">退出</span></el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    
                    <div @click="linkTo('/login')" v-if="!name" class="login login1">登录</div>
                    <div class="col-sufix">|</div>
                    <div @click="handleLink" class="my-home">我的创巢</div>
                    -->
                </div>
            </div>
        </div>
        <div class="nav-wrap">
            <div @click="linkTo('/')" class="logo" :style="{backgroundImage: 'url(' +configObj.logo+ ')'}"></div>
            <div class="nav-item" v-if="selectnum != -1">
                <div @click="linkTo(item.link)" v-for="(item,index) in linkArr" :key="index" class="nav-list" :class="selectnum == index?'active':''">
                    <span >{{item.name}}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
let CONSTANT = require('../../constant/constant.js'),
    common = require('../../common.js'),
    config = require('../../config/config.js')
export default {
    data () {
        return {
            configObj:'',
            linkArr:[{
                name:'首页',
                link:'/'
            },{
                name:'贷款产品',
                link:'/product'
            },{
                name:'关于我们',
                link:'/aboutUs'
            }],
            name:'',
            arrow_transform: false
        }
    },
    props:{
        selectnum:{
            default: 0
        },
    },
    created(){
        let arr = location.hostname.split('.');
        let urlName = arr[0] == 'www'?arr[1]:arr[0];
        this.configObj = config.urlObjs[urlName]
    },
    mounted(){
        this.name = common.getCookie('nickname')
        // this.name = '深圳是和所望科技优先公司'
    },
    methods:{
        linkTo(link){
           this.$router.push(link)
        },
        handleLink() {
            const userType = common.getCookie('userType')
            if (userType == 'company') {
                this.linkTo('/ccOrderHand')
            } else if (userType == 'channel') {
                this.linkTo('/channelOrderHand')
            } else {
                this.linkTo('/bankBankOrderHand')
            }
            localStorage.removeItem('defaultOpened')
        },
        loginOut(){
             common.setCookie('sessionId','')
             common.setCookie('nickname','')
             this.$nextTick(() => {
                this.$router.replace('/login')
             })
        },
        transform_arrow(visible) {
            this.arrow_transform = visible;
        }
    }
}
</script>

<style lang="scss">
    .web-header {
        border-bottom: 1px solid #f2f2f2;
    }
    .header{
        height: 40px;
        background-color: #F5F5F5;
        font-size: 14px;
        line-height: 40px;
        /*padding-right: 18.7%;*/
        overflow: hidden;
        /*width: 85%;*/
        .el-dropdown-menu__item{
            padding: 0;
            span{
                padding: 0 20px;
            }
        }
        .right-area {
            width: 1200px;
            margin: 0 auto;
            .head-left-content {
                font-size: 12px;
                color: #333333;
                float: left;
            }
            .head-right-content {
                float: right;
                color: #333333;
                div {
                    float: right;
                }
                .r-pointer {
                    cursor: pointer;
                }
                .r-block {
                    float: right;                    
                    span {
                        margin-left: -6px;
                        &:before {
                            position: relative;
                            right: 6px;
                        }
                    }
                    .r-inline {
                        float: right;
                        margin-left: 20px;                    
                    }
                    .regist {
                        width: 60px;
                        height: 26px;
                        background-color: #ED7018;
                        text-align: center;
                        border-radius: 13px;
                        position: relative;
                        top: 7px;
                        line-height: 28px;
                        margin-left: 0px;
                        color: white;
                    }
                }
                .nikname {
                    color: #666666;
                }
                .logout {
                    color: #000000;
                    font-weight: bold;
                }
                .separator {
                    margin-left: 23px;
                    margin-right: 23px;
                    color: #D1D1D1
                }
            }
        }
        .tip{
            padding: 0 1.46% 0 .48%;
        }
        .my-home {
            color: #EE7723;
            cursor: pointer;
        }
        .col-sufix {
            margin: 0 3px 0 3px;
            color: #EE7723;
        }
        .login1 {
            color: #EE7723;
            cursor: pointer;
        }
        .login {
            /*padding: 0 1.46% 0 .48%;*/
            &.name{
                color: #111111;
            }
            .arrow{
                width: 9px;
                height: 7px;
                margin-top: 16px;
                background: url(../../images/arrow1.png) no-repeat;
                background-size: 100%;
                margin-left: 7px;
                transform:rotate(0deg);
                -ms-transform:rotate(0deg); /* Internet Explorer */
                -moz-transform:rotate(0deg); /* Firefox */
                -webkit-transform:rotate(0deg); /* Safari 和 Chrome */
                -o-transform:rotate(0deg); /* Opera */
                transition: transform 0.5s;
                -moz-transition: transform 0.5s; /* Firefox 4 */
                -webkit-transition: transform 0.5s; /* Safari 和 Chrome */
                -o-transition: transform 0.5s; /* Opera */
            }
            &:hover {
                .arrow {
                    transform:rotate(-180deg);
                    -ms-transform:rotate(-180deg); /* Internet Explorer */
                    -moz-transform:rotate(-180deg); /* Firefox */
                    -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
                    -o-transform:rotate(180deg); /* Opera */
                    transition: transform 0.2s;
                    -moz-transition: transform 0.2s; /* Firefox 4 */
                    -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
                    -o-transition: transform 0.2s; /* Opera */
                }
            }
            .arrow-transform {
                transform:rotate(-180deg);
                -ms-transform:rotate(-180deg); /* Internet Explorer */
                -moz-transform:rotate(-180deg); /* Firefox */
                -webkit-transform:rotate(-180deg); /* Safari 和 Chrome */
                -o-transform:rotate(180deg); /* Opera */
                transition: transform 0.2s;
                -moz-transition: transform 0.2s; /* Firefox 4 */
                -webkit-transition: transform 0.2s; /* Safari 和 Chrome */
                -o-transition: transform 0.2s; /* Opera */
            }
        }
        .header-select{
            position: relative;
            color: #EE7723;
            padding-right: .48%;
            &:after{
                content: '';
                position: absolute;
                width: 1px;
                height: 14px;
                background-color: #D1D1D1;
                right: 0;
                top:14px;
            }
        }
        /*
        div{
            float: right;
            cursor: pointer;
        }
        */
    }
    .nav-wrap{
        width: 1200px;
        margin: 0 auto;
        position: relative;
        height: 100px;
        line-height: 100px;
        background-color: #fff;
        overflow: hidden;
        .logo{
            cursor:pointer;
            position: absolute;
            top: 23px;
            left: 0%;
            width: 224px;
            height: 54px;
            color: #fff;
            background-size: 100%;
        }

        .nav-item{
            float: right;
            font-size: 18px;
            color: #666;
            /* margin-right: 14%; */
            .nav-list{
                float: left;
                /* width:225px; */
                margin-left: 110px;
                text-align: center;
                cursor: pointer;
                span{
                    color: #666;
                }
                &.active{
                    color: #EE7723;
                    span{
                        color: #EE7723;
                        height: 75px;
                        display: inline-block;
                        border-bottom: 2px solid #EE7723;
                    }
                }
                &:hover{
                    span{
                        color: #EE7723;
                        transition:all .5s linear
                    }

                }
            }
        }
    }
</style>
